<template>
  <div class="container">
    <div class="hir1">
      <topNav>找工作</topNav>
    <div class="pic">
        <img src="http://file.rzkeji.com/web/recruit/icon/swiper1.png" class="tip"/>
    </div>
    <div class="search" @click="goSearch">
    <input placeholder="请输入职位名/公司关键字" />
    <img src="http://file.rzkeji.com/web/recruit/icon/search.png" />
    </div>
    <menu1></menu1>
    </div>
        <workList :workList='workList1' class="workList"></workList>
    <footerNav :select1="select"></footerNav>
  </div>
</template>

<script>
import topNav from '@/components/topNav'
import menu1 from '@/components/menu1'
import workList from '@/components/workList'
import footerNav from '@/components/footerNav'
import {mapState} from 'vuex'
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      aa:false,
      aScorll:"",
      select:"1",
      workList1:'',
      scroll:'',
      position_type:'',
      salary_range:'',
      salary_type:''
    }
  },
   computed:{
    //  ...mapState(['classify']),
      ...mapState({
        classify: state => state.modulesWork.classify,
        address: state => state.modulesWork.address,
        salary: state => state.modulesWork.salary,
  }),
   },
  watch:{//监听vuex的变化，进行worklist的更新
    classify(data){
       if(data!=""){
          this.getWorkList('',data.industry_id,data.job_id,this.address.province,this.address.city,this.address.area,
            data.salary_type,data.salary_range)
        }
    },
    address(data){
       if(data!=""){
          this.getWorkList('',this.classify.industry_id,this.classify.job_id,data.province,data.city,data.area,this.salary_type,this.salary_range)
        }
    },
    salary(data){
       if(data!=""){
         this.salary_type=data.salary_type;
         this.salary_range=data.salary_range;
          this.getWorkList(
            '',
            this.classify.industry_id,this.classify.job_id,
            this.address.province,this.address.city,this.address.area,
            data.salary_type,data.salary_range)
        }
    }
  },
  components: {
    topNav,
    workList,
    menu1,
    footerNav
  },

  methods: {
    goSearch(){
      this.$router.push({path:"/search"})
    },
    async getWorkList(position_type='',industry_id="",job_id="",province="",city="",area="",salary_type="",salary_range=""){
      var  userToken=window.localStorage.getItem('userToken')
      let res=await this.$axios.get('/position/getPositionList',{params:{is_top:1,trade_id:industry_id,job_id:job_id,province:province,city:city,area:area,salary_type:salary_type,salary_range:salary_range,user_token:userToken,position_type:position_type}})
      this.workList1=res.data.data;
      for(let [index,value] of this.workList1.entries()){
        value.sex=this.$currency.sexTag1(value.sex)
      }
      
    }
  },
  // mounted(){
    
  //   // let wrapper = this.$refs.wrapper;
  //   // this.scroll = new BScroll(wrapper,{click: true});
    
  // },
  // updated () {
  //       //解决better-scroll因为图片没有下载完导致的滚动条高度不够，无法浏览全部内容的问题。
  //       //原因是better-scroll初始化是在dom加载后执行，此时图片没有下载完成，导致滚动条高度计算不准确。
  //       //利用图片的complete属性进行判断，当所有图片下载完成后再对scroll重新计算。
  //       let img = this.$refs.wrapper.getElementsByTagName('img')
  //       let count = 0
  //       let length = img.length
  //       if (length) {
  //           let timer = setInterval(() => {
  //               if (count == length) {
  //                   this.scroll.refresh()
  //                   clearInterval(timer)
  //               } else if (img[count].complete) {
  //                   count ++
  //               }
  //           }, 100)
  //       }
        
  //   }
 activated(){
   this.getWorkList();
    if(this.$route.query.type!=undefined){
      this.position_type=this.$route.query.type
     this.getWorkList(this.position_type)
    }
  }
}
</script>

<style scoped>
.temWrap,.wrap{width: 100%;height: 100%;}
.tip{width: 100%;height: auto;}
.search{position: relative;margin:0 20px;margin-top: 15px;}
.search input{width: 92%;height:30px;line-height: 30px;background-color: #fff;border-radius: 10px;padding-left:20px;background-color: #f1f1f1;}
.search img{width: 20px;height: 20px;position: absolute;right: 10px;top: 10.25px;}

.workList{
  padding-bottom:50px;
}
</style>

